<template>
    <view class="content">
        <uni-forms ref="refForm" :rules="rules" :model="form">
            <!-- 表单内容 -->
            <uni-forms-item name="receiver" class="form-item">
                <text class="label">收货人</text>

                <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
            </uni-forms-item>

            <uni-forms-item name="contact" class="form-item">
                <text class="label">手机号码</text>

                <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
            </uni-forms-item>

            <uni-forms-item name="fullLocation" class="form-item">
                <text class="label">所在地区</text>

                <picker
                    class="picker"
                    mode="region"
                    @change="onFullLocationChange"
                    :value="form.fullLocation.split(' ')"
                >
                    <view v-if="form.fullLocation">{{ form.fullLocation }}</view>

                    <view v-else class="placeholder">请选择省/市/区(县)</view>
                </picker>
            </uni-forms-item>

            <uni-forms-item name="address" class="form-item">
                <text class="label">详细地址</text>

                <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
            </uni-forms-item>

            <view class="form-item">
                <label class="label">设为默认地址</label>
                <switch
                    @change="onSwitchChange"
                    class="switch"
                    color="#27ba9b"
                    :checked="form.isDefault === 1"
                />
            </view>
        </uni-forms>
    </view>

    <!-- 提交按钮 -->
    <button class="button" @tap="onSubmit">保存并使用</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
    getMemberAddressByIdAPI,
    postMemberAddressAPI,
    putMemberAddressAPI,
} from '@/services/address.ts'
import { onLoad } from '@dcloudio/uni-app'

// 表单数据
const form = ref({
    receiver: '', // 收货人
    contact: '', // 联系方式
    fullLocation: '', // 省市区(前端展示)
    provinceCode: '', // 省份编码(后端参数)
    cityCode: '', // 城市编码(后端参数)
    countyCode: '', // 区/县编码(后端参数)
    address: '', // 详细地址
    isDefault: 0, // 默认地址，1为是，0为否
})

const query = defineProps<{
    id?: string
}>()
// 动态修改标题
uni.setNavigationBarTitle({ title: query.id ? '编辑地址' : '新增地址' })

const getMemberAddressByIdData = async () => {
    if (query.id) {
        const res = await getMemberAddressByIdAPI(query.id)
        Object.assign(form.value, res.result)
    }
}

onLoad(() => {
    getMemberAddressByIdData()
})

// 省市区选择器变化事件
const onFullLocationChange: UniHelper.RegionPickerOnChange = (e) => {
    // 前段页面展示
    form.value.fullLocation = e.detail.value.join(' ')
    // 后端参数
    const [provinceCode, cityCode, countyCode] = e.detail.code!
    // form.value.provinceCode = province
    // form.value.cityCode = city
    // form.value.countyCode = county
    Object.assign(form.value, { provinceCode, cityCode, countyCode }) // 对象合并 等同上面3行代码
    console.log(form.value)
}

// 开关变化事件(设为默认地址)
const onSwitchChange: UniHelper.SwitchOnChange = (e) => {
    form.value.isDefault = e.detail.value ? 1 : 0
}

// 表单实例
const refForm = ref<UniHelper.UniFormsInstance>()
// 表单校验规则
const rules: UniHelper.UniFormsRules = {
    receiver: {
        rules: [{ required: true, errorMessage: '请填写收货人姓名' }],
    },
    contact: {
        rules: [
            { required: true, errorMessage: '请填写收货人手机号码' },
            { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号码格式不正确' },
        ],
    },
    fullLocation: {
        rules: [{ required: true, errorMessage: '请选择省/市/区(县)' }],
    },
    address: {
        rules: [{ required: true, errorMessage: '请填写详细地址' }],
    },
}

// 提交按钮点击事件
const onSubmit = async () => {
    try {
        await refForm.value?.validate?.()
        if (query.id) {
            // 编辑地址
            await putMemberAddressAPI(query.id, form.value)
            requestSuccess('编辑成功')
        } else {
            // 新增地址
            await postMemberAddressAPI(form.value)
            requestSuccess()
        }
    } catch (error) {
        uni.showToast({ icon: 'error', title: '请填写完整信息' })
    }
}

// 新增地址成功后，延时返回上一页
const requestSuccess = (title: string = '添加成功') => {
    uni.showToast({ icon: 'success', title })
    // 延时返回上一页
    setTimeout(() => {
        uni.navigateBack()
    }, 500)
}
</script>

<style lang="scss">
page {
    background-color: #f4f4f4;
}

.content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item,
    .uni-forms-item {
        display: flex;
        align-items: center;
        min-height: 96rpx;
        padding: 25rpx 10rpx 40rpx;
        background-color: #fff;
        font-size: 28rpx;
        border-bottom: 1rpx solid #ddd;
        position: relative;
        margin-bottom: 0;

        // 调整 uni-forms 样式
        .uni-forms-item__content {
            display: flex;
        }

        .uni-forms-item__error {
            margin-left: 200rpx;
        }

        &:last-child {
            border: none;
        }

        .label {
            width: 200rpx;
            color: #333;
        }

        .input {
            flex: 1;
            display: block;
            height: 46rpx;
        }

        .switch {
            position: absolute;
            right: -20rpx;
            transform: scale(0.8);
        }

        .picker {
            flex: 1;
        }

        .placeholder {
            color: #808080;
        }
    }
}

.button {
    height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
}
</style>
